<html>

<head>
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
    <link rel='stylesheet' href='https://unpkg.com/formiojs@latest/dist/formio.full.min.css'>
    <script src='https://unpkg.com/formiojs@latest/dist/formio.full.min.js'></script>
    <script type='text/javascript'>
        window.onload = function () {
            Formio.createForm(document.getElementById('formio'), {
                components: [
                    {
                        type: 'textfield',
                        key: 'firstName',
                        label: 'First Name',
                        placeholder: 'Enter your first name.',
                        input: true
                    },
                    {
                        type: 'textfield',
                        key: 'lastName',
                        label: 'Last Name',
                        placeholder: 'Enter your last name',
                        input: true
                    },
                    {
                        type: 'currency',
                        key: 'cost',
                        label: 'Cost',
                        placeholder: 'Enter $ cost',
                        input: true
                    },
                    {
                        type: 'button',
                        action: 'submit',
                        label: 'Submit',
                        theme: 'primary'
                    }
                ]
            }).then((form) => {
                console.log('log form', form);

                form.on('submit', function (submission) {
                    console.log('Submission was made!', submission);
                });

                // Everytime the form changes, this will fire.
                form.on('change', function (changed) {
                    console.log('Form was changed', changed);
                });

            });
        };
    </script>
</head>

<body>
    <div id='formio'></div>
</body>

</html>